<template>
  <div class="box">
    <banner></banner>
    <div class="br"></div>
    <column centerText="全民砍价 >"></column>
    <shop-card :item="list"></shop-card>
    <div class="br"></div>
    <column centerText="精选专题 >"></column>
    <sift :item="newS"></sift>
    <div class="br"></div>
    <column centerText="人气推荐 >"></column>
    <cardY :moods="moods"></cardY>
  </div>
</template>

<script>
import banner from "../components/home/banner.vue";
import sift from "../components/home/sift.vue";
import cardY from "../components/common/cardY.vue";
import column from "../components/common/column.vue";
import shopCard from "../components/common/shopCard.vue";
import { getBargain, getNews, getMoods } from "@/api";
import { reactive, toRefs } from "vue";
export default {
  setup() {
    let obj = reactive({
      list: [],
      newS: [],
      moods: [],
    });
    getBargain().then((res) => {
      // 砍价的数据
      obj.list = res.data.goodsMap[99764];
    });
    getNews().then((res) => {
      console.log(res);
      // 精选专题的数据
      obj.newS = res.data;
    });
    //  人气数据
    getMoods({ page: 1, pageSize: 400 }).then((res) => {
      console.log(res);
      obj.moods = res.data.slice(9, 13);
    });
    return { ...toRefs(obj) };
  },

  components: { banner, column, shopCard, sift, cardY },
};
</script>

<style lang="scss" scoped>
.br {
  width: 100%;
  height: 22px;
  background-color: #f5f5f5;
}
.box {
  width: 100%;
  height: 100%;
  overflow: auto;
}
</style>
